<template>
  <!-- 主页组件，显示玩家角色信息、消息列表和挂机信息 -->
  <div class="home-container">
    <!-- 角色信息卡片 -->
    <el-card class="character-info">
      <template #header>
        <div class="card-header">
          <span>【洪荒挂机修仙】</span>
        </div>
      </template>
      <div class="character-details">
        <!-- 显示角色当前位置 -->
        <p>位置：{{ character.location }} 挂机中...</p>
      </div>
    </el-card>

    <!-- 消息列表卡片 -->
    <el-card class="messages">
      <template #header>
        <div class="card-header">
          <span>消息</span>
        </div>
      </template>
      <div class="message-list">
        <!-- 消息滚动区域 -->
        <el-scrollbar height="200px">
          <!-- 循环显示消息列表 -->
          <div>
            <div v-for="message in messages" :key="message.id" class="message-item">
              {{ message.content }}
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-card>

    <!-- 挂机信息卡片 -->
    <el-card class="offline-info">
      <template #header>
        <div class="card-header">
          <span>挂机信息</span>
        </div>
      </template>
      <div class="offline-details">
        <!-- 显示离线时间 -->
        <p>离线时间：{{ offlineInfo.time }}</p>
        <!-- 显示预计修为收益 -->
        <p>预计收益：{{ offlineInfo.projectedGain }}点修为</p>
        <!-- 显示随机事件 -->
        <p>随机事件：{{ offlineInfo.event }}</p>
      </div>
    </el-card>
    
    <!-- 添加占位元素确保内容可以完全滚动 -->
    <div class="placeholder"></div>
  </div>
</template>

<script>
// 导入响应式引用功能
import { ref } from 'vue'

export default {
  name: 'Home',
  setup() {
    // 定义角色信息数据
    const character = ref({
      name: '青云子',
      realm: '筑基初期',
      level: 5,
      cultivation: 1200,
      maxCultivation: 2000,
      element: '水',
      elementPercent: 75,
      hp: 150,
      maxHp: 150,
      mp: 100,
      maxMp: 100,
      location: '青云山脚'
    })

    // 定义消息列表数据
    const messages = ref([
      { id: 1, content: '[系统消息] 你获得了10点修为...' },
      { id: 2, content: '[挂机收益] 离线1小时，预计获得150点修为' },
      { id: 3, content: '[随机事件] 你发现了一株百年灵草！' }
    ])

    // 定义挂机信息数据
    const offlineInfo = ref({
      time: '1小时',
      projectedGain: 150,
      event: '你发现了一株百年灵草！'
    })

    // 返回数据供模板使用
    return {
      character,
      messages,
      offlineInfo
    }
  }
}
</script>

<style scoped>
/* 主页容器样式 */
.home-container {
  padding: 20px; overflow-y: auto; scrollbar-width: none; /* Firefox */
-webkit-scrollbar: none; /* Chrome, Safari and Opera */
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 70px; /* 为底部导航留出空间 */
  padding-top: 50px; /* 为顶部状态栏留出空间 */
}

/* 卡片头部样式 */
.character-info .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 角色详情段落样式 */
.character-details p {
  margin: 5px 0;
}

/* 消息卡片样式 */
.messages {
  margin-bottom: 20px;
}

/* 消息项样式 */
.message-item {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

/* 挂机详情段落样式 */
.offline-details p {
  margin: 5px 0;
}

/* 占位符样式 */
.placeholder {
  height: 70px; /* 与底部导航栏高度一致 */
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .home-container {
    padding: 10px;
    padding-bottom: 70px; /* 为底部导航留出空间 */
    padding-top: 45px; /* 为顶部状态栏留出空间 */
  }
  
  .character-info .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .character-info .card-header > span {
    font-size: 14px;
  }
  
  .character-details p {
    font-size: 14px;
  }
  
  .messages,
  .offline-info {
    margin-bottom: 10px;
  }
  
  .message-item {
    font-size: 14px;
  }
  
  .offline-details p {
    font-size: 14px;
  }
  
  .placeholder {
    height: 60px; /* 移动端底部导航栏高度 */
  }
}

@media screen and (max-width: 480px) {
  .home-container {
    padding-top: 40px; /* 为顶部状态栏留出空间 */
  }
  
  .character-info .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .character-info .card-header > span {
    font-size: 14px;
  }
  
  .character-details p {
    font-size: 14px;
  }
  
  .messages,
  .offline-info {
    margin-bottom: 10px;
  }
  
  .message-item {
    font-size: 14px;
  }
  
  .offline-details p {
    font-size: 14px;
  }
  
  .placeholder {
    height: 60px; /* 移动端底部导航栏高度 */
  }
}
</style>